<template>
    <div id="manage-assistant">
        <div class="manage-class-search">
            <el-form :inline="true" class="demo-form-inline clearfix" :model="formInline">
                <el-form-item label="教师信息：" prop="teacherInfo">
                    <el-input v-model="formInline.teacherInfo" placeholder="输入账号/用户名称" maxlength="20"></el-input>
                </el-form-item>
                <div class="button-style" style="margin-left:20px" @click="search" >搜 索</div>
                <el-form-item style="float: right; margin-right: 0;">
                    <div class="button-style" style="width:90px;" @click="addFn(1)">添 加</div>
                    <div class="button-style" style="width:90px; margin-left: 20px;" @click="deleteAll">批量删除</div>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <el-table  :data="tableData" ref="multipleTable"  style="width: 100%"   @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="60" :selectable='isDisabled' disabled="true"></el-table-column>
                <el-table-column prop="name" label="教师姓名"></el-table-column>
                <el-table-column prop="userNumber" label="工号"></el-table-column>
                <el-table-column prop="sexName" label="性别"></el-table-column>
                <el-table-column prop="telephoneNumber" label="联系方式"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column fixed="right" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="initCode(scope.row.id)">初始化密码</el-button>
                        <el-button type="text" size="small" @click="release(scope.row.id)" v-if="scope.row.falg == 0">解除授课</el-button>
                        <el-button type="text" size="small" style="color:#d9d9d9; cursor: not-allowed;"  v-if="scope.row.falg == 1">解除授课</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
        <el-dialog :close-on-click-modal="false" :title="dialogRepeatTitle" :visible.sync="dialogRepeat" width="550px">
            <el-form ref="addform" :inline="true"  :model="addform"  :rules="rules" label-width="90px">
                <el-form-item label="账 号 :" prop="number">
                    <el-input v-model="addform.number"  placeholder="请输入账号" @input="getinfo('addform')"></el-input>
                </el-form-item>
                <el-form-item label="助教名称 :"  prop="name">
                    <el-input v-model="addform.name" maxlength="10" placeholder="请输入助教名称" :disabled="disables"></el-input>
                </el-form-item>
                <el-form-item label="邮 箱 :"   >
                    <el-input v-model="addform.email" maxlength="50" placeholder="请输入邮箱" :disabled="disables"></el-input>
                </el-form-item>
                <el-form-item label="联系方式 :" >
                    <el-input v-model="addform.telephone" maxlength="11"  placeholder="请输入联系方式" :disabled="disables"></el-input>
                </el-form-item>
                <el-form-item label="性 别 :" >
                    <!-- <el-select v-model="addform.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select> -->
                    <el-radio-group  v-model="addform.sex" placeholder="请选择性别" :disabled="disables">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="btn-center" style="text-align: center;">
                <button class="button-style" @click="saveInfo('addform')" >保 存</button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 课程ID
                courseId: '',
                formInline: {
                    teacherInfo: ''
                },
                tableData: [],
                // 页数
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                // 全选
                multipleSelection: [],

                dialogRepeat: false,
                dialogRepeatTitle: '',
                // 添加
                addform: {
                    email: '',
                    name: '',
                    number: '',
                    telephone: '',
                    sex: '1',
                    role: '1',
                },
                // 表单验证规则
                rules:{
                    name:[
                        { required: true, message: '请输入助教名称', trigger: 'blur' },
                    ],
                    number:[
                        { required: true, message: '请输入账号', trigger: 'blur' },
                    ]
                },
                //返显学号不可点击
                disables: false,

            }
        },
        created () {
            let self = this
            //获取课程id
            self.courseId = this.$localstorage.getLocalStorage('setCourseId')
            // 获取类表
            self.getList()
        },
        methods: {
            isDisabled(row, index){
                if(row.falg == 1){
                    return 0
                }else{
                    return 1
                }
            },
            // 获取列表
            getList(){
                let self = this
                self.$http.get('/tes/user/OtherTeacherPage?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&userInfo='+self.formInline.teacherInfo+'&courseId='+self.courseId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.content
                        self.totalCount = res.data.total
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //搜索
            search(){
                this.currentPage = 1
                this.getList()
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
                this.multipleSelection = valArr
            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.getList()
            },
            // 添加
            addFn(){
                let self = this
                self.addform.name = ''
                self.addform.number = ''
                self.addform.telephone = ''
                self.addform.sex = '1'
                self.addform.role = '1'
                self.addform.email = ''
                self.disables = false
                self.dialogRepeatTitle = '添加'
                self.dialogRepeat = true
            },
            // 保存信息
            saveInfo(addform){
                let self = this
                self.$refs[addform].validate((valid) => {
                    if (valid) {
                        const loading = self.$loading({
                            lock: true,
                            text: '正在保存中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        self.$http.post('/tes/user/createAssistant?identity=1&courseId='+self.courseId,{
                           name: self.addform.name,
                           userNumber: self.addform.number,
                           telephoneNumber:self.addform.telephone,
                           sex: self.addform.sex,
                           email:self.addform.email,
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                self.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                self.getList()
                                self.dialogRepeat = false
                                self.$refs[addform].resetFields()
                                loading.close()
                            }else {
                                loading.close()
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //获取班级信息详情
            getinfo(addform){
                let self = this
                self.$http.post("/tes/user/student/info?identity=1",{
                    userNumber:self.addform.number
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        if(res.data){
                            self.addform.name = res.data.name
                            self.addform.telephone = res.data.telephoneNumber
                            self.addform.email = res.data.email
                            if(typeof(res.data.sex) == 'undefined'){
                                self.addform.sex = ''
                            }else{
                                self.addform.sex = ''+res.data.sex+''
                            }
                            self.$message({
                                message: '自动填充已存在的教师',
                                type: 'warning'
                            })
                            self.$refs['addform'].clearValidate();
                            self.disables = true
                        }else{
                            self.addform.telephone =''
                            self.addform.email =''
                            self.addform.name =''
                            self.disables = false
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //批量删除
            deleteAll(){
                let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的内容',
                        type: 'warning'
                    })
					return
                }
				self.$confirm('已选教师与课程存在关联关系,是否删除', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    const loading = self.$loading({
                        lock: true,
                        text: '正在删除中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    })
					self.$http.post('/tes/user/batch-delete?courseId='+self.courseId+'&errorFlag=true',self.multipleSelection).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            // 重新渲染类表
                            self.getList()
                            loading.close()
                        }else{
                            self.$message.error(res.message)
                            loading.close()
                        }
					},(err) => {
                        console.log('err');
                        loading.close()
					})
				}).catch(() => {
				})
            },
            //初始化密码
            initCode(id){
                let self = this
                self.$http.put('/tes/user/'+id+'/init-password').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '初始化成功',
                            type: 'success'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                })
            },
            // 解除授课
            release(id) {
                let self = this
                self.$confirm('确认解除授课？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    self.$http.put('/tes/user/RelievingTeaching?userId='+id+'&courseId='+self.courseId).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '解除成功',
                                type: 'success'
                            })
                            self.getList()
                        }else if(res.code == 1) {
                            self.$router.push({
                                path: '/Teaching/index'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                })
            }
        }
    }
</script>

<style lang="scss">
    #manage-assistant{
        .demo-form-inline{
            .el-input__inner{
                width: 218px;
            }
        }
        .el-dialog__footer{
            text-align: center;
            .dialog-footer{
                .el-button {
                    width: 90px;
                }
            }
        }
    }
</style>
<style lang="scss" scoped>
    #manage-assistant{
        .manage-class-search{
            margin: 23px 0 25px;
            height: 32px;
            .button-style{
                width: 90px;
            }
            .el-form-item{
                margin-right: 25px;
            }
        }
    }
</style>
